<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="健身课程" width="30%">
    <Description
      size="middle"
      :title="title"
      :bordered="false"
      :column="1"
      :data="refundData"
      :schema="refundSchema"
    />
  </BasicDrawer>
</template>
<script lang="tsx" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { Description } from '@/components/Description';
  import { DescItem } from '@/components/Description';
  import {
    exerciseTypeOption,
    getLabelByValue,
    exerciseFrequencyOption,
  } from '@/views/course/help/dict';
  import { getPhotoUrl } from '@/api/sys/upload';

  const title = ref('Drawer Title');

  const refundData = ref({
    title: '',
    dataId: '',
    type: '',
    frequency: '',
    duration: '',
    context: '',
  });
  const refundSchema: DescItem[] = [
    // {
    //   field: 'title',
    //   label: '课程名',
    // },
    {
      field: 'dataId',
      label: '课程封面',
      render: (text) => <img width={100} src={`${getPhotoUrl}${text}`}></img>,
    },
    {
      field: 'type',
      label: '锻炼类型',
      render: (text) => getLabelByValue(text, exerciseTypeOption),
    },
    {
      field: 'frequency',
      label: '锻炼频率',
      render: (text) => getLabelByValue(text, exerciseFrequencyOption),
    },
    {
      field: 'duration',
      label: '锻炼时长(分钟)',
    },
    {
      field: 'context',
      label: '备注内容',
    },
  ];
  const [register] = useDrawerInner(({ data }) => {
    console.log(data);
    if (data) {
      title.value = data.title;
      refundData.value = data;
    }
  });
</script>
